<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/user_auth.css">
</head>

<body>
    <section class="ui-container">
        <ul class="step-navi">
            <li class="active">身份资料</li>
            <li>绑定银行卡</li>
            <li>验证手机号</li>
            <li>认证完成</li>
        </ul>
        <form action="" class="form-common2">
            <div class="step step1 show">
                <footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                        <button type="button" class="btn-footer btn-red" onclick="goStep(2)">下一步</button>
                    </div>
                </footer>
                <div class="u-module">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">真实姓名</label>
                        <input type="text" placeholder="真实姓名" id="title">
                    </div>
                    <div class="ui-form-item  ui-border-b">
                        <label for="#">身份证号</label>
                        <div class="form-photo-box">
                            <i data-link="#img1"></i>
                            <input type="text" placeholder="身份证号">
                        </div>
                    </div>
                </div>
                <ul class="ui-justify">
                    <li>
                        <div class="form-single-img">
                            <p>示例</p>
                            <div class="img-box" style="background-image:url(../images/demo/demo-card-1.jpg)"></div>
                        </div>
                    </li>
                    <li>
                        <div class="form-single-img">
                            <p>上传身份证正面照</p>
                            <div class="img-box plus">
                                <input type="file" id="img1">
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="u-module">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">学校全称</label>
                        <input type="text" placeholder="（仅在职教师需要填写）">
                    </div>
                    <div class="ui-form-item ui-border-b ui-form-item-textarea">
                        <label for="#">个人简介</label>
                        <textarea class="count" data-length="800" placeholder="个人简介"></textarea>
                        <div class="form-unit count">800</div>
                    </div>
                </div>
            </div>
            <div class="step step2">
                <footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                        <button type="button" class="btn-footer btn-red" onclick="goStep(3)">下一步</button>
                    </div>
                </footer>
                <div class="u-module">
                    <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-tb">
                        <label for="#">开户行</label>
                        <select name="" id="">
                            <option value="0" selected disabled>选择开户行</option>
                            <option value="1">上海支行</option>
                            <option value="2">浙江支行</option>
                            <option value="3">江苏支行</option>
                        </select>
                    </div>
                    <div class="ui-form-item  ui-border-b">
                        <label for="#">开户支行</label>
                        <input id="" type="text" placeholder="开户支行" >
                    </div>

                    <div class="ui-form-item  ui-border-b">
                        <label for="#">银行卡号</label>
                        <input id="" type="number" placeholder="银行卡号（本人）" >
                    </div>
                </div>
            </div>
            <div class="step step3">
                <footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                        <button type="button" class="btn-footer btn-red" onclick="goStep(4)">提交</button>
                    </div>
                </footer>
                
                    <div class="ui-form-item ui-form-item-show ui-border-tb">
                        <label for="#">手机号</label>
                        <input type="number" placeholder="手机号信息">
                    </div>
                    <input type="checkbox" class="bth-change" data-txt="修改">
                    <div class="ui-form-item ui-border-b">
                        <label for="#">验证码</label>
                        <div class="form-qr-code-box">
                            <input type="text" placeholder="验证码">
                            <button type="button">发送验证码</button>
                        </div>
                    </div>
                
            </div>
            <div class="step step4">
                <footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                        <button type="button" class="btn-footer btn-red" onclick="goStep(4)">快速至发起项目</button>
                    </div>
                </footer>
                <div class="success-box">
                    <h4>恭喜你，实名认证资料填写完成！<br/>欢迎您在火堆多多发起善举</h4>
                    <p>页面会在<i>5</i>秒后自动跳转至发起项目</p>
                </div>
            </div>
        </form>
    </section>
    <div class="d-warning">
        <div class="txt">
            <h2>审核中</h2>
            <p>您的身份已提交并审核中</p>
        </div>
    </div>
    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script>
    (function() {
        $('.form-common2 .form-single-img .img-box input[type=file]').change(function() {
            var url = 'file:///D:/git/crowdfundingmoney/crowdfundingmoney/web-app/images_mobile/demo/demo-jieshao-2.jpg';
            $(this).parent().css('background-image', 'url(' + url + ')');
            $(this).parent().removeClass('plus');
        });

        $('.form-common2 .form-photo-box > i').click(function() {
            $($(this).attr('data-link')).click();
        });

        $('.form-common2 .form-qr-code-box button').click(function() {
            var obj = $(this).attr('disabled', true);
            var count = null,
                i = 30;

            obj.text(i + '秒后可重发');
            count = setInterval(function() {
                i--;
                if (i <= 0) {
                    obj.removeAttr('disabled').text('重发验证码');
                    clearInterval(count)
                } else {
                    obj.text(i + '秒后可重发');
                }
            }, 1000)
        });
        var bind_name = 'input';
        if (navigator.userAgent.indexOf("MSIE") != -1) {
            bind_name = 'propertychange';
        }

        $('.count').bind(bind_name, function() {
            checkWords(this, $(this).attr('data-length'));
        })
        $('.count').blur(function() {
            if ($(this).val().length > $(this).attr('data-length')) {
                $(this).val($(this).val().substr(0, $(this).attr('data-length')));
            }
        });

    })();

    function addPhotoPreview(imgs, url) {
        var max = parseInt(imgs.attr('data-max-length'));
        if (max < imgs.find('.img-box').length) {
            imgs.find('.img-box').eq(max - 1).css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
        } else {
            imgs.find('.img-box:last-child').css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
            var index = parseInt(imgs.attr('data-index'));
            index++;
            var html = '<div class="img-box"><b class="close"><img src="../images/icon-fork-white.png" alt=""></b><input type="file" id="img' + (index) + '"><input type="hidden"></div>';

            imgs.attr('data-index', index).append(html);
        }
    }

    function checkWords(obj, n) {
        n = parseInt(n);
        var c = 0;
        if ($(obj).val().length > n) {
            c = 0;
        } else {
            c = n - $(obj).val().length;
        }
        $(obj).siblings('.count').text(c);
    }

    function goStep(n) {
        $('ul.step-navi > li').eq(n - 1).addClass('active').siblings().removeClass('active');
        $('.step').eq(n - 1).addClass('show').siblings().removeClass('show');
    }

    function countLink(url) {
        var i = 5;
        var c = null;
        $('.success-box p i').text(i);
        c = setInterval(function() {
            if (i < 1) {
                clearInterval(c);
                c = null;
                location.href = url;
            } else {
                i--;
                $('.success-box p i').text(i);
            }
        }, 1000);
    }
    </script>
</body>

</html>
